import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table ,Pagination,Input, Button,Modal,Row ,Col,message,Select,Divider,Popconfirm} from 'antd';
import styles from './index.less';
const Option = Select.Option;
const Pages = ({ maillist, dispatch, loading }) => {
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '联系方式',
            dataIndex: 'phone',
        },
        {
            title: '办公电话',
            dataIndex: 'shortNum',
        },
        {
            title: '短号',
            dataIndex: 'callNum',
        },
        {
            title: '职责',
            dataIndex: 'remark',
        },
        {
            title: '所属部门',
            dataIndex: 'organizations',
            render:text =>text.map((item,index)=>{
                return <div key={index}><span style={{color:'green'}}>*</span>{item.s_name}</div>;
            }),
        },
        {
            title: '性别',
            dataIndex: 'sex',
            render:text =>text && text ==1?'男':"女",
        },
        {
            title: '出生年月',
            dataIndex: 'birthday',
        },

        {
            title: '职务',
            dataIndex: 'dutys',
            render:text =>text.map((item,index)=>{
                return <div key={index}><span style={{color:'green'}}>*</span>{item.s_name}</div>;
            }),
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"maillist/deleteMaillist",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"maillist/inputOut",payload:{record:record}});
                    dispatch({type:"maillist/getBMZZ"});
                }}>修改</a>
            </div>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...maillist} loading={loading.global}/>
            <Table
                columns={columns}
                size="small"
                loading={loading.global}
                pagination={false}
                rowKey={id=>id.id}
                dataSource={maillist.getMaillistData || null} />
            <Pagination current={maillist.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={maillist.total}
                onChange={pages => { !loading.global && dispatch({type:'maillist/inputOut',payload:{pages:pages}});}}/>
        </div>
    );
};

Pages.propTypes = {
    maillist: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ maillist, loading }) => ({ maillist, loading }))(Pages);


class PagesGET extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            name: "",
            phone:"",
            nameADD: "",
            phoneADD:"",
            bumen:[],
            zhize:[],
            xinbie:null,
            ny:'',
            zc:'',
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        this.props.dispatch({type:"maillist/getMaillist",payload:{
            name:"",
            phone :"",
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){
        let {pages,dispatch,visible,getBMZZData ,record ,loading} = this.props;
        return(
            <div className={styles.containerit}>
                <Input value={this.state.name} placeholder="请输入姓名" style={{margin:10,width:256}} onChange={e=>this.setState({name:e.target.value})}/>
                {/* <Input value={this.state.phone} placeholder="手机号" style={{margin:10,width:256}} onChange={e=>this.setState({phone:e.target.value})} /> */}
                <Button type='primary' onClick={()=>{
                    dispatch({type:"maillist/getMaillist",payload:{
                        name:this.state.name,
                        phone: this.state.phone,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>
                    dispatch({type:"maillist/getBMZZ"})
                }>添加成员</Button>

            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if(nextProps.pages !== this.props.pages){
            let {name,phone} = this.state;
            this.props.dispatch({
                type:"maillist/getMaillist",
                payload:{
                    name:name,
                    phone: phone,
                    pageNumber :nextProps.pages ==0?1:nextProps.pages,
                    pageSize :10,
                }});
        }
        if(!nextProps.visible){
            this.setState({
                nameADD: "",
                phoneADD:"",
                bumen:[],
                zhize:[],
                xinbie:null,
                ny:'',
                zc:'',
            });
        }
        if (nextProps.record.id !== this.props.record.id) {
            // console.log(nextProps.record);
            let {name,phone,shortNum,birthday,sex,organizations,dutys} = nextProps.record;
            let bumen = [],zhize = [];
            organizations && organizations.map(item=>bumen.push(item.id));
            dutys && dutys.map(item=>zhize.push(item.id));
            this.setState({
                nameADD: name,
                phoneADD:phone,
                bumen:bumen,
                zhize:zhize,
                xinbie:sex,
                ny:birthday,
                zc:shortNum,
            });
        }
    }
}
